<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue3如何实现一个响应式</title>
</head>
<body>
  <h2>Vue3响应式--Proxy()</h2>
  <pre>
    let obj = {
      name: "小明",
      age: 18
    }
  
    const p = new Proxy(obj, {
      get(target, propName) {
        console.log(`读取属性：${propName}`);
        return target[propName]
      },
      set(target, propName, value) {
        console.log(`修改属性：${propName}=${value}`);
        target[propName] = value
      },
      deleteProperty(target, propName) {
        console.log(`删除了属性：${propName}`);
        return delete target[propName]
      } 
    })
  </pre>
</body>
<script>
  let obj = {
    name: "小明",
    age: 18
  }

  const p = new Proxy(obj, {
    get(target, propName) {
      console.log(`读取属性：${propName}`);
      return target[propName]
    },
    set(target, propName, value) {
      console.log(`修改属性：${propName}=${value}`);
      target[propName] = value
    },
    deleteProperty(target, propName) {
      console.log(`删除了属性：${propName}`);
      return delete target[propName]
    } 
  })
</script>
</html>